import React from 'react'
import './index.less'
import { Menu, Icon, Dropdown } from 'antd';
import { Link, withRouter } from 'react-router-dom'
const MenuItem = Menu.Item;

class Header extends React.Component {

  state = {
    current: '',
    userInfo: ''
  }

  componentWillMount() {
    let herf = window.location.href;
    let index = herf.lastIndexOf("/") + 1;
    let current = herf.substring(index);
    if (current === "home") {
      current = "culture";
    }
    this.setState({
      current: current,
      userInfo: JSON.parse(window.localStorage.getItem('userInfo'))
    })
  }

  handleClick = (e) => {
    this.setState({
      current: e.key,
    });
  }
  userClick = () => {
    this.setState({
      current: ""
    })
  }
  logout = () => {
    window.localStorage.clear();
    this.props.history.push('/login');
  }

  render() {
    const dropMenu = (
      <Menu>
        <MenuItem>
          <a target="_blank" rel="noopener noreferrer">
            <Link to="/home/user" className="header-user-setting" onClick={this.userClick}>个人中心</Link>
          </a>
        </MenuItem>
        <MenuItem>
          <a target="_blank" rel="noopener noreferrer" onClick={this.logout}>注销</a>
        </MenuItem>
      </Menu>
    );
    const menuData = [
      {
        name: '文化墙',
        key: 'culture',
        router: '/home/culture'
      },
      {
        name: '个人周报',
        key: 'personal',
        router: '/home/personal'
      },
      {
        name: '团队周报',
        key: 'team',
        router: '/home/team'
      },
      {
        name: '项目周报',
        key: 'project',
        router: '/home/project'
      },
      {
        name: '友情链接',
        key: 'link',
        router: '/home/link'
      },
    ]
    return (
      <section className="header">
        <img className="header-logo" src="/assets/phicomm.jpg" alt="logo" />
        <Menu 
          className="header-content"
          onClick={this.handleClick}
          selectedKeys={[this.state.current]}
          mode="horizontal"
        >
          { menuData.map((item) => 
            <MenuItem key={item.key}>
              <Link to={item.router}>{item.name}</Link>
            </MenuItem>
          )}
        </Menu>
        <div className="header-user">
          <Icon type="user" className="header-user-icon" />
          <Dropdown overlay={dropMenu} className="header-user-content">
            <a className="ant-dropdown-link">
               {this.state.userInfo.name}<Icon type="down" />
            </a>
          </Dropdown>
        </div>
      </section>
     
    )
  }
}

export default withRouter(Header);
